import React, {Component} from 'react';
import {Card, Row, Col, Button, Empty, Spin, message} from 'antd';
import {downloadReports} from '~/service/reports';
import DataEchart from '~/component/DataEchart';
import AddComparisonView from './AddComparisonView';

class RealtimeStatisticsView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isVisiable: false,
            isDownLoading: false
        };
    }

    // 导出明细
    onDownloadReport = () => {
        const {id, queryParams} = this.props;
        // TODO: 需要添加校验逻辑
        this.setState({isDownLoading: true});
        downloadReports(queryParams, '直播到课统计', () => {
            this.setState({isDownLoading: false});
        }).catch(() => {
            this.setState({isDownLoading: false});
        });
    };

    // 添加对比
    onAddComparison = () => {
        const {dataSource} = this.props;
        if (dataSource?.length) {
            this.setState({
                isVisiable: true
            });
        } else {
            message.warning('请先查询作为原始数据');
        }
    };

    // 点击确认添加
    onOk = params => {
        this.props.onOk(params);
        this.setState({
            isVisiable: false
        });
    };

    // 点击取消
    onCancel = () => {
        this.setState({
            isVisiable: false
        });
    };

    render() {
        const {isloading, dataSource, dataMapOptions, onClear, canClear} = this.props;
        const {isVisiable, isDownLoading} = this.state;
        return (
            <Card
                className="real-time-statistic-view"
                title="实时到课数据统计"
                extra={(
                    <Button
                        // style={{marginTop: 20}}
                        onClick={this.onDownloadReport}
                        loading={isDownLoading}
                        disabled={!dataSource.length}
                    >
                        明细导出
                    </Button>
                )}
            >
                <Spin spinning={isloading} tip="数据加载中...">
                    {dataSource.length ? (
                        <DataEchart key={121} data={dataMapOptions} />
                    ) : (
                        <Empty
                            imageStyle={{height: 70}}
                            image={Empty.PRESENTED_IMAGE_SIMPLE}
                        />
                    )}
                </Spin>
                <Row>
                    <Col span={24} style={{textAlign: 'left', marginTop: 15}}>
                        <Button
                            type="primary"
                            htmlType="submit"
                            onClick={this.onAddComparison}
                        >
                            + 添加对比
                        </Button>
                        <Button
                            // disabled={canClear}
                            style={{marginLeft: 8}}
                            onClick={onClear}
                        >
                            清除
                        </Button>
                    </Col>
                </Row>
                <AddComparisonView
                    isVisiable={isVisiable}
                    onOk={this.onOk}
                    onCancel={this.onCancel}
                />
            </Card>
        );
    }
}

export default RealtimeStatisticsView;
